<template>
  <div class="content">
    <el-form ref="adminForm" :model="adminInfo" :rules="rules">
      <h3>管理员登录系统{{isLoading}}</h3>
      <el-form-item prop="adminName">
        <el-input v-model="adminInfo.adminName" placeholder="请输入管理员名称"></el-input>
      </el-form-item>
      <el-form-item prop="passWord">
        <el-input type="password" v-model="adminInfo.passWord" placeholder="请输入管理员密码"></el-input>
      </el-form-item>
      <div class="container">
        <el-button type="success" :loading="isLoading" class="btn" @click="submitForm">登录</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      adminInfo: {
        adminName: "",
        passWord: ""
      },
      rules: {
        adminName: [
          { required: true, message: "请输入管理员名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        passWord: [
          { required: true, message: "请输入管理员密码", trigger: "blur" },
          { min: 6, max: 8, message: "长度在 6 到 8个字符", trigger: "blur" }
        ]
      }
    };
  },
  watch: {},
  computed: {
    ...mapState(["isLoading"])
  },
  methods: {
    submitForm() {
      this.$refs["adminForm"].validate(a => {
        this.$store.dispatch("login", this);
      });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  font-size: 1.5rem;
  padding: 1rem 3rem;
  color: skyblue;
  text-transform: uppercase;
}

.btn {
  text-decoration: none;
  border: 1px solid rgb(146, 148, 248);
  position: relative;
  overflow: hidden;
  color: black;
  background: white;
}

.btn:hover {
  box-shadow: 1px 1px 25px 10px rgba(146, 148, 248, 0.4);
}

.btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(146, 148, 248, 0.4),
    transparent
  );
  transition: all 650ms;
}

.btn:hover:before {
  left: 100%;
}
@keyframes slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.content {
  background: url("../public/timg.jpg") 6px -38px;
  background-size: 320px 380px;
  width: 300px;
  border: 3px solid deeppink;
  border-radius: 10px;
  margin: 250px auto;
  padding: 20px;
  height: 300px;
  // .btn {
  //   margin-top: 20px;
  //   margin-left: 110px;
  // }
  h3 {
    box-shadow: 1px 3px 4px 1.5px;
    text-shadow: 1px 2px 3px rgb(226, 8, 8);
    margin-top: 35px;
    text-align: center;
    background-image: -webkit-linear-gradient(
      left,
      #3498db,
      #f47920 10%,
      #d71345 20%,
      #f7acbc 30%,
      #ffd400 40%,
      #3498db 50%,
      #f47920 60%,
      #d71345 70%,
      #f7acbc 80%,
      #ffd400 90%,
      #3498db
    );
    background-size: 200% 100%;
    -webkit-animation: slide 2s infinite linear;
    animation: slide 5s infinite linear;
    font-size: 30px;
    border-radius: 10px;
  }
}
</style>